<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.oo {
	width: 100px;
	height: 100px;
	margin: 200px auto;
}

.oo:BEFORE, .oo:AFTER {
	width: 100px;
	height: 200px;
	background-color: blue;
	border-radius: 50% 50% 0 0;
	position: absolute;
	content: "";
}

.oo:BEFORE {
transform: rotate(-45deg) translateX(-50px);	
}
.oo:AFTER {
transform: rotate(45deg)translateX(50px) ;	
}
</style>
</head>
<body>
	<div class="oo"></div>
	<div class="oo"></div>
	<div class="oo"></div>
	<div class="oo"></div>
	<div class="oo"></div>
	<div class="oo"></div>
	
</body>
</html>